<template>
  <div class="page-wrapper">
    <div class="head-part">
      <div class="head-item"><div class="label">采购申请单号：</div><div class="content">{{pageData.orderNo}}</div></div>
      <div class="head-item"><div class="label">药店：</div><div class="content">{{pageData.hospitalName}}</div></div>
      <div class="head-item"><div class="label">联系人：</div><div class="content">{{pageData.hospitalLinkman}}</div></div>
      <div class="head-item"><div class="label">联系电话：</div><div class="content">{{pageData.hospitalLinkmanPhone}}</div></div>
      <div class="head-item"><div class="label">申请日期：</div><div class="content">{{pageData.createTime}}</div></div>
      <div class="head-item" v-if="mode === 'review'"><div class="label">审核日期：</div><div class="content">{{pageData.authTime}}</div></div>
      <div class="head-item"><div class="label">审核人：</div><div class="content">{{username}}</div></div>
    </div>
    <div class="table-wrapper">
      <Table :columns="columns" border :data="pageData.drugs">
        <div slot="footer" name="footer" class="tableFooter">
            <div class='ofive'>合计</div>
            <div class='osix' ></div>
            <div class='othree' ></div>
            <div class='othree' ></div>
            <div class='oone' ></div>
            <div class='othree'></div>
            <div class='otwo' >{{genTotal('applyNumber')}}</div>
            <div class='otwo' >{{genTotal('purchaseNumber')}}</div>
            <div></div>
        </div>
      </Table>
    </div>
    <div class='ofour'>备注：{{pageData.remarks || pageData.remark}}</div>
    <div v-if="pageData.status == '3'" class='ofour'>审核不通过原因：{{pageData.authReason}}</div>
    <div class="btn-group">
      <Button v-if="mode === 'edit'" type="primary" @click="handlePass">审核通过</Button>
      <Button v-if="mode === 'edit'" class='oseven' @click="showUnpassModal = true">审核不通过</Button>
      <Button @click="handleBack">返回</Button>
    </div>
    <Modal
      v-model="showUnpassModal"
      title="审核不通过">
      <div class='oeight' >请填写不通过原因：</div>
      <Form ref="formValidate" :model="formValidate" :rules="formRule">
        <FormItem prop="msg">
          <Input v-model="formValidate.msg" type="textarea" />
        </FormItem>
      </Form>
      <div slot="footer">
        <Button style="width:51px;height:35px;" @click="showUnpassModal = false">取消</Button>
        <Button style="width:51px;height:35px;" type="primary" @click="ok" :loading="btnLoading">确定</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import api from "@/api/commonApi";
import cookie from "@/utils/cookie.js";
export default {
  props: {
    mode: String
  },
  data() {
    const that = this;
    return {
      username: null,
      pageData: {
        msg: '',
        drugs: [
        ],
        // orderNo: null, // 采购申请单号
        // hospitalName: null, // 药店
        // linkman: null, // 联系人
        // linkmanTelephone: null, // 联系电话
        // createTime: null, // 申请时间
        // auditTime: null, // 审核时间

      },
      columns: [
        { type: 'index', title: '排序', width: 60, align: 'center' },
        { title: '药品通用名', key: 'ypmc', width: 150 },
        { title: '剂型', key: 'ypjx', width: 80 },
        { title: '规格', key: 'ypgg', width: 80 },
        { title: '厂家', key: 'scqymc', width: 200},
        { title: '单位', key: 'zxdw', width: 80 },
        { title: '申请数量', key: 'applyNumber', width: 120 },
        {
          title: '审核通过数量', key: 'purchaseNumber', width: 120, render(h, params) {
            const { applyNumber, purchaseNumber, id } = params.row;
            console.log(110)
            return h('InputNumber', {
              props: {
                max: applyNumber,
                min: 0,
                step: 1,
                precision: 0,
                value: purchaseNumber,
                disabled: that.mode === 'review'
              },
              on: {
                'on-change'(e) {
                  params.row.purchaseNumber = e;
                  that.pageData.drugs[params.index] = params.row;
                  that.$forceUpdate();
                  // that.pageData.drugs.filter(item => item.id === id)[0].purchaseNumber = e;
                }
              }
            })
          }
        },
        {
          title: '审核说明', key: 'auditMsg', minWidth: 150, render(h, params) {
            const { auditMsg, id } = params.row;
            return h('Input', {
              style: {
                margin: '5px 0'
              },
              props: {
                type:'textarea',
                disabled: that.mode === 'review',
                value: auditMsg
              },
              on: {
                'on-change'(e) {
                  params.row.auditMsg = e.target.value;
                  that.pageData.drugs[params.index] = params.row;
                  that.$forceUpdate();
                  // that.pageData.drugs.filter(item => item.id === id)[0].auditMsg = e.target.value;
                }
              }
            })
          }
        },
      ],
      showUnpassModal: false,
      btnLoading: false,
      formValidate: {
        msg: null
      },
      formRule: {
        msg: [{ required: true, message: '请填写不通过原因', trigger: 'change' }]
      }
    }
  },
  created() {
    this.username = cookie.getCookie("userName");
  },
  mounted() {
    this.findPurchaseApplyById();
  },
  methods: {
    ok() {
      this.$refs['formValidate'].validate((valid) => {
        if (valid) {
          this.auditPurchaseApply('3');
        } else {
          this.btnLoading = false; 
        }
      })
    },
    genTotal(type) {
      let resTotal = 0;
      this.pageData.drugs.forEach(item => {
        resTotal += item[type];
      });
      return resTotal;
    },
    handleBack() {
      const { pagination, filterObj } = this.$route.query;
      this.$router.push({
        path: '/index/drugfirmsmanage/procurement/purchaseApply/list',
        query: {
          pagination,
          filterObj
        }
      })
    },
    handlePass() {
      let flag = false;
      if(this.pageData.drugs.length>0){
        this.pageData.drugs.forEach(i =>{
          if(i.purchaseNumber == 0 || !i.purchaseNumber){
            flag = true;
          }
        })
      }
      if(flag){
        this.$Message.error("请填写审核通过数量!");
        return ;
      }
      this.$Modal.confirm({
        title: '您确认此采购申请单内容正确无误吗？',
        content: '<p>注：确定后将按审核通过数量生成采购需求</p>',
        loading: true,
        onOk: () => {
            this.auditPurchaseApply('2');
        }
      });
    },
    findPurchaseApplyById() {
      console.log({id: this.$route.params.id})
      this.$axios.post(api.getPurchaseApplyById, { id: this.$route.params.id }).then(res => {
          if (res.data.code === 1) {
              res.data.object.drugs.forEach(item => {
                item.applyNumber = Number(item.applyNumber || 0);
                item.purchaseNumber = Number(item.purchaseNumber || 0);
              });
              this.pageData = res.data.object;
          } else {
              this.$Message.error(res.data.message);
          }
      });
    },
    // type '2'通过 '3'不通过
    auditPurchaseApply(type) {
      const reqBody = {
        id: this.pageData.id,
        drugs: this.pageData.drugs,
        status: type
      };
      if (type === '3') {
        reqBody.msg = this.formValidate.msg;
      }
      console.log(JSON.stringify(reqBody));//
      this.$axios.post(api.auditPurchaseApply, reqBody).then(res => {
          if (res.data.code === 1) {
              this.$Message.success('操作成功');
              this.handleBack();
          } else {
              this.$Message.error(res.data.message);
          }
          this.$Modal.remove();
      }).catch(() => {
          this.$Modal.remove();
      });
    }
  },
  watch: {
    pageData: {
      deep: true,
      handler(n) {
        console.log(n);
      }
    }
  }
}
</script>

<style scoped lang="less">
.oone{width: 200px;}
.otwo{width:120px;}
.othree{width: 80px;}
.ofour{margin: 10px 0}
.ofive{width: 61px;}
.osix{width: 150px;}
.oseven{margin: 0 15px}
.oeight{margin: 10px 0; fontSize: 14px}
.head-part {
  margin-bottom: 20px;
  display: flex;
  justify-content: space-between;
  .head-item {
    display: flex;
    .label {
      font-weight: bold;
    }
  }
}
.btn-group {
  text-align: center;

}
.tableFooter {
  display: flex;
  // text-align: center;
 &>div {
   border-right: 1px solid #e9eaec;
   padding: 0 18px;
   &:last-child {
     border: none;
   }
 }
}
</style>